---
title: FocusLock
description: "`FocusLock`は、モーダルやダイアログなどの要素でフォーカスを制限し、フォーカスをその範囲内にロックすることで、アクセシビリティを向上させるコンポーネントです。"
source: components/focus-lock
---

```tsx preview functional client
const { open, onToggle } = useDisclosure()

return (
  <VStack align="flex-start" gap="0">
    <Button onClick={onToggle}>Please Click</Button>

    <Collapse open={open}>
      <FocusLock>
        <VStack mt="lg" bg="bg.panel" p="lg" rounded="l2">
          <Input placeholder="This is Input" bg="bg" />

          <Button alignSelf="flex-end">Button</Button>
        </VStack>
      </FocusLock>
    </Collapse>
  </VStack>
)
```

## 使い方

:::code-group

```tsx [package]
import { FocusLock } from "@yamada-ui/react"
```

```tsx [alias]
import { FocusLock } from "@/components/ui"
```

```tsx [monorepo]
import { FocusLock } from "@workspaces/ui"
```

:::

```tsx
<FocusLock />
```

## Props

<PropsTable name="focus-lock" />
